<template>
    <view class="pt50">
        <div class="item" @click="showRegion = true">
            {{ $t('我的地区') }}
            <div class="left">
                <text>{{ area }}</text>
                <u-icon name="arrow-right" size="26" color="#999999">
                </u-icon>
            </div>
        </div>
        <view class="mx20" v-if="info">
            <view class="py20">申请状态</view>
            <view>
                <view class="fs30 color-999 mb20">申请区域:{{ info.community_name }}</view>
                <view class="fs30 color-999 mb20">审核状态:{{ info.status_text }}</view>
            </view>
        </view>
        <div class="btn">
            <u-button type="primary" @tap="submit">{{ $t("修改") }}</u-button>
        </div>


        <u-select v-model="showRegion" :list="regionList" mode="mutil-column-auto" @confirm="confirm"></u-select>
    </view>
</template>
<script>
export default {
    data() {
        return {
            showRegion: false,
            area: '',
            area_code: '',
            info: {},
            regionList: []
        }
    },
    onLoad() {
        this.getUserInfo()
        this.getRegion()
        this.getChangeInfo()
    },
    methods: {
        submit() {
            this.$u.api.change_apply({ community_id: this.area_code }).then(res => {
                this.$u.toast(res.msg)
                setTimeout(() => {
                    uni.navigateBack({ delta: 1 })
                }, 1000)
            })
        },
        getChangeInfo() {
            this.$u.api.change_info().then(res => {
                console.log('res: ', res);
                this.info = res.data

            })
        },
        getRegion() {
            this.$u.api.getRegion().then(res => {
                console.log('res: ', res);
                this.regionList = res.data
            })
        },
        getUserInfo() {
            this.$u.api.material().then(res => {
                this.area = res.data.data?.area_code_text?.name
            })
        },
        confirm(e) {
            this.area_code = e.slice(-1)[0].value
            this.area = `${e[0].label}/${e[1].label}/${e[2].label}`
        }
    }
}
</script>
<style scoped lang='scss'>
.item {
    @include flex($aligin: center, $justify: space-between);
    border-bottom: 2rpx solid #f8f8f8;
    padding: 32rpx 0;
    margin: 0 20rpx;

    .left {
        color: #666666;
        @include flex;

        .text {
            margin-right: 10rpx;
        }
    }
}

.btn {
    margin: 200rpx 30rpx;
}
</style>